<template>
    <div>
        <el-row>
            <el-col :span="4" class="bg-arm text-white h-50px p-12px ">
                <span class="text-1.1em ">特能集团人才测评系统</span>
            </el-col>
            <el-col :span="18" class="h-50px">
                <el-menu class="el-menu-header h-50px" mode="horizontal" router text-color="#fff"
                    active-text-color="gold" background-color="rgb(51.2, 126.4, 204)">
                    <el-submenu v-for="(value, name, index) in menus" :index="index + ''" :key="name">
                        <template slot="title"><i class="fa fa-newspaper-o text-5 text-white" aria-hidden="true"></i>
                            {{
                                name
                            }}</template>
                        <el-menu-item v-for="(item, cindex) in value" :index="item.link" :key="item.title">
                            <i class="fa fa-pencil-square text-5 text-white mr-1" aria-hidden="true"></i>{{ item.title
                            }}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>
            <el-col :span="2" class="bg-arm h-50px pt-15px">
                <el-button @click="logout" class="bg-arm border-arm logout" size="mini"><i
                        class="fa fa-sign-out text-3 text-red mr-1"></i></el-button>
            </el-col>
        </el-row>

    </div>
</template>
<script>
import { getMenus } from '../../api/menus';
export default {
    props: {
        type: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            menus: {},
        };
    },
    async mounted() {
        this.menus = getMenus(this.type);
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        logout() {
            this.$router.push({ name: 'logout' })
        }
    }
}
</script>
<style lang="css" scoped>
:deep(.el-submenu__title i) {
    color: aliceblue;
}

.logout:hover {
    background-color: rgb(51.2, 126.4, 204);
    border: none;
}
</style>